<template>
  <div class="content">
    <mt-header fixed title="登录">
       <router-link to="/" slot="left">
         <mt-button icon="back">返回</mt-button>
       </router-link>
       <router-link to="/zhuce" slot="right">
          <mt-button >注册</mt-button>
       </router-link>
     </mt-header>
     <mt-field label="用户名" placeholder="请输入用户名" v-model="w_username"></mt-field>
     <mt-field label="密码" placeholder="请输入密码"  v-model="mimima" type="password"></mt-field><br><br>
     <mt-button  plain size="large" type="default" @click.native="openToastWithIcon">登录</mt-button>


  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { mapState } from 'vuex'
  export default {
          data () {
              return {
                  title: '登录',
                  w_username:'',
                  mimima:''
              }
          },
          methods:{

            openToastWithIcon() {             
                  for(var i=0; i<this.qwe.length;i++){
                    if(this.w_username==this.qwe[i].name&&this.mimima==this.qwe[i].mima){                 
                             Toast({message: '登录成功',iconClass: 'mintui mintui-success'});
                             this.$store.commit("changename",this.w_username);
                             this.$router.push("/");                                              
                    }
                }     
            }
        },
        computed:{
             ...mapState({
                 qwe: state => state.qwe
             }),
             ...mapState({
                 username: state => state.username
             })
        }
  }
</script>
<style>
  @component-namespace page {
    @component toast {
      @descendent wrapper {
        padding: 0 20px;
        position: absolute 50% * * *;
        width: 100%;
        transform: translateY(-50%);
        button:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }
  }
.content{
  margin-top: 40%;
}
</style>